<!-- add by lty 20181222 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>选择服务时间</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/swiper/3.4.2/swiper.min.css">
    <link rel="stylesheet" href="css/serverTime.css">

    <script src="js/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/swiper/3.4.3/swiper.jquery.min.js"></script>
    <script src="js/serverTime.js"></script>

    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
   <script src="js/jquery/3.2.1/jquery.min.js"></script>
    <!-- 插件js -->
	<script src="../js/zepto.js"></script>
	<script src="../js/sm.js" ></script>
	<script src="../js/sm-extend.js" ></script>
	<script src="../js/request.js"></script>
  </head>
    <script type="text/javascript">
	window.$$=window.Zepto = Zepto;
</script>
  <body>
    <div class="page">
      <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left" href="javascript:window.history.back();" data-transition='slide-out'>
          <span class="icon icon-left"></span>
        </a>
        <h1 class="title">添加服务时间</h1>
      </header>

      <!-- 主体内容 -->
      <div class="T_content">
        <!-- 广告 -->
        <div class="T_ads esp1 cl">
          <p class="T_ads--text esp1 fl">时间被约满？用日常保洁专享卡告别反复预约,最高享85折！</p>
          <span class="icon icon-right fr"></span>
        </div>
        <div class="time-block">
          <!-- 时间导航 -->
          <div class="time--nav">
            <div class="swiper-wrapper">
              <div class="swiper-slide cur">
                <a href="javascript:void(0)">
                  <p>明天</p>
                  <p class="month-day">12/24</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">
                  <p>后天</p>
                  <p class="month-day">12/25</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">
                  <p>周三</p>
                  <p class="month-day">12/26</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">
                  <p>周四</p>
                  <p class="month-day">12/27</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">
                  <p>周五</p>
                  <p class="month-day">12/28</p>
                </a>
              </div>
              <div class="swiper-slide">
                <a href="javascript:void(0)">
                  <p>周六</p>
                  <p class="month-day">12/29</p>
                </a>
              </div>
            </div>
            <!-- <div class="nav_content">
              <div class="swiper-container-nav">
                
              </div>
            </div> -->
          </div>
          
          <!-- 时间选择 -->
          <div class="time-content">
            <ul class="cl timeList">
              <!-- 当时间不能点击市，加上类名：disabled -->
         <!--      <li>08:00</li>
              <li>08:30</li>
              <li>09:00</li>
              <li>09:30</li>
              <li>10:00</li>
              <li>10:30</li>
              <li>11:00</li>
              <li>11:30</li>
              <li>12:00</li>
              <li>12:30</li>
              <li>13:00</li>
              <li>13:30</li>
              <li>14:00</li>
              <li>14:30</li>
              <li>15:00</li>
              <li>15:30</li>
              <li>16:00</li>
              <li>16:30</li>
              <li>17:00</li> -->
            </ul>
          </div>
        </div>

        <!-- 底部提交订单按钮 -->
        <div class="T_footer--block">
          <a href="javascript:;" class="sure_time--btn" id="sure_time--btn">
            完成
          </a>
        </div>
        
      </div>
    </div>
    <script type="text/javascript">
	var serviceId = Request.queryString("serviceId");
	var months = Request.queryString("months");
	var price = Request.queryString("price");
	var orderId = Request.queryString("orderId");
	var chargesType = Request.queryString("chargesType");
	var tiemArr  = new Array();
	var hourArr =  new Array();
	//"12:30","13:00","13:30",,"18:30","19:00","19:30","20:00"
	hourArr= ["09:00","09:30","10:00","10:30","11:00","14:00","14:30","15:00","15:30","16:00"];
	
	$(function(){
		for(var i=1;i<8;i++)
	    {
			var obj = new Object();
	     var weekDayArr=["周日","周一","周二","周三","周四","周五","周六"]//星期映射数组
	     var myDate = new Date()
	     var milliseconds=myDate.getTime()+1000*60*60*24*i; //当i为0代表当前日期，为1时可以得到明天的日期，以此类推
	     var newMyDate = new Date(milliseconds);
	     var weekDay=newMyDate.getDay(); //获取当前星期X(0-6,0代表星期天)
	     var year = newMyDate.getFullYear();//获取当前年
	     var month = newMyDate.getMonth()+1;//获取当前月
	     var day = newMyDate.getDate();//获取当前日
	     obj.date = month+'/'+day;
	     obj.week = weekDayArr[weekDay];
	      //console.log(year+'/'+month+'/'+day+weekDayArr[weekDay])
	     tiemArr.push(obj);
	    }
		
		
		initTime();
		initHour();
	})
	function initHour(type){
		/**
		 * 
		 * 获取当前时间
		 */
		function getNow(s) {
		    return s < 10 ? '0' + s: s;
		}

		var myDate = new Date();
		var h=myDate.getHours();       //获取当前小时数(0-23)
		var m=myDate.getMinutes();     //获取当前分钟数(0-59)

		var now=getNow(h)+':'+getNow(m);
		var html = '';
		$(hourArr).each(function(i,n){
			if(type){
				html+=' <li>'+n+'</li>';
			}else{
				if(n<now){
					html+=' <li class="disabled">'+n+'</li>';	
				}else {
					html+=' <li>'+n+'</li>';
				}
			}
			
		})
		$(".timeList").html(html);
		$(".time-content ul li").click(function(){
		    var _this = $(this);
		    if(!_this.hasClass("disabled")){
		      _this.addClass('on').siblings().removeClass('on');
		    }
		  });
	}
	
	function initTime(){
		var html = '';
		$(tiemArr).each(function(i,n){
			if(i==0){
				html+=' <div class="swiper-slide cur first">';
			}else{
				html+=' <div class="swiper-slide">';
			}
			html+='<a href="javascript:void(0)">'+
            '<p>'+n.week+'</p>'+
            '<p class="month-day">'+n.date+'</p>'+
          '</a>'+
       '</div>';
		})
		
		$(".swiper-wrapper").html(html);
		 var _serverTime = new Swiper('.time--nav', {
			    pagination: '.swiper-pagination',
			    slidesPerView: 4.5,
			    freeMode: true
			  });
		 // 当点击时间导航时，当前点击加高亮，下面的时间取消选择
		  $(".time--nav .swiper-slide").click(function(){
		    var _this = $(this);
		    if(!_this.hasClass('cur')){
		      _this.addClass('cur').siblings().removeClass('cur');
		      $(".time-content ul li").removeClass('on');
		    }
		    if(!_this.hasClass('first')){
		    	initHour(true);
		    }else{
		    	initHour(false);
		    }
		  });
	}
    </script>
  </body>
</html>